<template>
    <layout>
        <!-- #ifdef MP-WEIXIN || H5 -->
        <uv-sticky bg-color="#F5F5F5" offset-top="0" customNavHeight="0">
            <uv-navbar :fixed="true" :safeAreaInsetTop="true" height="0" bgColor="transparent" leftIcon=""/>
        </uv-sticky>
        <!-- #endif -->
        
        <!-- #ifdef MP-ALIPAY -->
        <!-- 首页完全透明，不显示任何导航栏元素 -->
        <!-- #endif -->

        <view class="container">
            <view class="banner">
                <uv-swiper class="bg" height="225" imgMode="aspectFill" keyName="image" :list="listAds"
                           indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
                <view class="intro" :style="introStyle">
                    <view class="greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
                    <view class="note">周文斌点餐外卖系统</view>
                </view>
            </view>
            <view class="content">
                <view class="entrance">
                    <view class="item " @tap="takein">
                        <view class="index-title">
                            <view class="font-md">堂食</view>
                            <view class="font-small text-light-black flex-1">下单免排队</view>
                        </view>
                        <view class="index-img">
                            <image src="/static/images/take_in.png" mode="aspectFit" class="img-01"></image>
                        </view>
                    </view>
                    <view class="item" @tap="takeout">
                        <view>
                            <view class="font-md">外卖</view>
                            <view class="font-small text-light-black">美食送到家</view>
                        </view>
                        <view class="index-img">
                            <image src="/static/images/take_out.png" mode="aspectFit" class="img-01"></image>
                        </view>
                    </view>
                   <!-- <view class="item " @tap="scanpay">
                        <view>
                            <view class="font-md">扫码付</view>
                            <view class="font-small text-light-black flex-1">扫码支付</view>
                        </view>
                        <view class="index-img">
                            <image src="/static/images/scan_payment.png" mode="aspectFit" class="img-01"></image>
                        </view>
                    </view> -->
                    <view class="item " @tap="franchisees"
                          v-if="accesses?.indexOf('user_franchisee') > -1 || false">
                        <view>
                            <view class="font-md">加盟商</view>
                            <view class="font-small text-light-black flex-1">加盟商</view>
                        </view>
                        <view class="index-img">
                            <image src="/static/images/franchisees.png" mode="aspectFit" class="img-01"></image>
                        </view>
                    </view>
                    <view class="item " @tap="counter_ordering"
                          v-if="accesses?.indexOf('user_shopkeeper') > -1 || false">
                        <view>
                            <view class="font-md">餐单</view>
                            <view class="font-small text-light-black flex-1">柜台餐单</view>
                        </view>
                        <view class="index-img">
                            <image src="/static/images/counter_ordering.png" mode="aspectFit" class="img-01">
                            </image>
                        </view>
                    </view>
                </view>
                <!-- <view class="info">
          <view class="integral_section">
            <view class="top">
              <text class="title">我的卡券</text>
              <text class="value">{{member.couponCount}}</text>
            </view>
            <view class="bottom">
              可抵扣商品价格哦
            </view>
          </view>
          <view class="qrcode_section" @tap="coupons">
            去领个券
            <view class="iconfont iconarrow-right"></view>
          </view>
        </view> -->

            </view>
        </view>
    </layout>
</template>

<script setup>
import {
    computed,
    ref
} from 'vue'
import {
    onLoad
} from '@dcloudio/uni-app'
import {
    menuAds
} from '@/api/market'
import {
    storeToRefs
} from 'pinia'
import {
    useMainStore
} from '@/store/store'
import { useNavbarHeight } from '@/hooks/useNavbar'
//
const main = useMainStore()
const {
    member,
    store,
    isLogin,
    accesses
} = storeToRefs(main)
//const store = ref(main.store)
const listAds = ref([])
// const isLogin = ref(main.isLogin)

// #ifdef MP-ALIPAY
const statusBarHeight = ref(0)
// #endif

// 计算intro的样式
const introStyle = computed(() => {
    // #ifdef MP-ALIPAY
    return {
        top: `calc(50rpx + ${statusBarHeight.value}px)`
    }
    // #endif
    
    // #ifndef MP-ALIPAY
    return {}
    // #endif
})
const handGetListAds = async () => {
    let shop_id = store.id ? store.id : 0;
    let data = await menuAds({
        shop_id: shop_id
    });
    if (data) {
        listAds.value = data.list;
        console.log('listAds:', listAds.value)
		console.log('accesses:' , accesses.value)
        uni.setStorage({
            key: 'isActive',
            data: data.isActive
        });
        if (data.list.length > 0) {
            uni.setStorage({
                key: 'shopAd',
                data: data.list[0].image
            });
        }
    }
}

const scanpay = () => {
    uni.navigateTo({
        url: '/pages/scanpay/scanpay?q=' + encodeURIComponent('shopId=1338499206339366913')
    })
}
const takein = () => {
    main.SET_ORDER_TYPE('takein')
    uni.switchTab({
        url: '/pages/menu/menu'
    })
}

const takeout = () => {
    main.SET_ORDER_TYPE('takeout')
    uni.switchTab({
        url: '/pages/menu/menu'
    })
}

const coupons = () => {
    console.log("--> % orderType:\n", main.orderType)
    console.log("--> % isLogin:\n", main.isLogin)
    if (!main.isLogin) {
        uni.navigateTo({
            url: '/pages/login/login'
        })
        return
    }
    uni.navigateTo({
        url: '/pages/components/pages/coupons/coupons'
    })
}

const goScore = () => {
    uni.navigateTo({
        url: '/pages/components/pages/scoreproduct/list'
    })
}

// 柜台点餐
const counter_ordering = () => {
    main.SET_ORDER_TYPE('counter_ordering')
    uni.switchTab({
        url: '/pages/menu/menu'
    })
}

const franchisees = () => {
    main.SET_ORDER_TYPE('franchisees')
    uni.switchTab({
        url: '/pages/menu/menu'
    })
}

onLoad(() => {
    // main.init()
    handGetListAds()
    console.log('accesses :=>', accesses.value)
    
    // #ifdef MP-ALIPAY
    // 获取支付宝小程序系统信息
    uni.getSystemInfo({
        success: (res) => {
            statusBarHeight.value = res.statusBarHeight || 0
        }
    })
    // #endif
})
</script>

<script>
export default {
  onLoad() {
    // 设置导航栏透明化，仅设置背景色
    uni.setNavigationBarColor({
      frontColor: '#ffffff', // 前景颜色（状态栏、标题等）
      backgroundColor: '#00000000' // 背景色透明
    });

    // 设置导航栏标题为空
    uni.setNavigationBarTitle({
      title: ' '
    });
  }
};
</script>

<style lang="scss">
.index-img {
    width: 100px;
    height: 100rpx;
    position: relative;
    left: -20rpx
}

.img-01 {
    width: 80px;
    height: 80rpx;
    // margin-top: 30rpx;
}

.img-02 {
    width: 110px;
    height: 110rpx;
    margin-top: 20rpx;
}


/* #ifdef H5 */
page {
    height: auto;
    min-height: 100%;
}

/* #endif */
page {
    background-color: #ffffff !important;
}

/* #ifdef MP-ALIPAY */
.alipay-transparent-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: transparent;
}

.alipay-status-placeholder {
    width: 100%;
    background-color: transparent;
}
/* #endif */

.banner {
    position: relative;
    width: 100%;
    //height: 300rpx;

    .bg {
        width: 100%;
        height: 225rpx;
        background-color: black;
    }

    .intro {
        position: absolute;
        top: calc(50rpx + var(--status-bar-height));
        left: 40rpx;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;

        .greet {
            font-size: $font-size-lg;
            margin-bottom: 10rpx;
        }

        .note {
            font-size: $font-size-sm;
        }
    }
}

.content {
    padding: 0 50rpx;
}

.entrance {
    position: relative;
    //top:0;
    margin-top: 15rpx;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    box-shadow: $box-shadow;
    padding: 30rpx 0;
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    justify-content: center;
    border-radius: 20rpx;

    .item {
        // flex: 1;
        display: flex;
        height: 100px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;

        //			&:nth-child(1):after {
        //				content: '';
        //				position: absolute;
        //				width: 1rpx;
        //				background-color: #ddd;
        //				right: 0;
        //				height: 100%;
        //				transform: scaleX(0.5) scaleY(0.8);
        //			}

        .icon {
            font-size: 90rpx;
            flex: 1;
            width: 40%;
            // color: #5A5B5C;
            color: #dd524d;
        }

        .title {
            flex: 1;
            font-size: 30rpx;
            color: $text-color-base;
            font-weight: 600;
        }
    }
}

.info {
    position: relative;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    box-shadow: $box-shadow;
    //padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .integral_section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .top {
            display: flex;
            align-items: center;

            .title {
                color: $text-color-base;
                font-size: $font-size-base;
                margin-right: 10rpx;
            }

            .value {
                font-size: 44rpx;
                font-weight: bold;
            }
        }

        .bottom {
            font-size: $font-size-sm;
            color: $text-color-assist;
            display: flex;
            align-items: center;
        }
    }

    .qrcode_section {
        color: $color-primary;
        display: flex;
        //flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: $font-size-sm;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 10rpx;
        }
    }
}
</style>